<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 600px"></div>
    <script src="./lib/echarts.min.js"></script>
    <script>
      const myChart = echarts.init(document.getElementById('main'))
      // const posList = [
      //   'left',
      //   'right',
      //   'top',
      //   'bottom',
      //   'inside',
      //   'insideTop',
      //   'insideLeft',
      //   'insideRight',
      //   'insideBottom',
      //   'insideTopLeft',
      //   'insideTopRight',
      //   'insideBottomLeft',
      //   'insideBottomRight',
      // ]
      // app.configParameters = {
      //   rotate: {
      //     min: -90,
      //     max: 90,
      //   },
      //   align: {
      //     options: {
      //       left: 'left',
      //       center: 'center',
      //       right: 'right',
      //     },
      //   },
      //   verticalAlign: {
      //     options: {
      //       top: 'top',
      //       middle: 'middle',
      //       bottom: 'bottom',
      //     },
      //   },
      //   position: {
      //     options: posList.reduce(function (map, pos) {
      //       map[pos] = pos
      //       return map
      //     }, {}),
      //   },
      //   distance: {
      //     min: 0,
      //     max: 100,
      //   },
      // }
      // app.config = {
      //   rotate: 90,
      //   align: 'left',
      //   verticalAlign: 'middle',
      //   position: 'insideBottom',
      //   distance: 15,
      //   onChange: function () {
      //     const labelOption = {
      //       rotate: app.config.rotate,
      //       align: app.config.align,
      //       verticalAlign: app.config.verticalAlign,
      //       position: app.config.position,
      //       distance: app.config.distance,
      //     }
      //     myChart.setOption({
      //       series: [
      //         {
      //           label: labelOption,
      //         },
      //         {
      //           label: labelOption,
      //         },
      //         {
      //           label: labelOption,
      //         },
      //         {
      //           label: labelOption,
      //         },
      //       ],
      //     })
      //   },
      // }
      // const labelOption = {
      //   show: true,
      //   position: app.config.position,
      //   distance: app.config.distance,
      //   align: app.config.align,
      //   verticalAlign: app.config.verticalAlign,
      //   rotate: app.config.rotate,
      //   formatter: '{c}  {name|{a}}',
      //   fontSize: 16,
      //   rich: {
      //     name: {},
      //   },
      // }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'pink', // 0% 处的颜色
              },
              {
                offset: 0,
                color: 'skyblue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: 'radial',
            x: 0.8,
            y: 0.5,
            r: 2,
            colorStops: [
              {
                offset: 0,
                color: 'yellow', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'skyblue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],

        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisTick: {
              show: 'true',
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
              color: 'red',
            },
            axisLine: {
              lineStyle: {
                color: '#333',
                type: 'dashed',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#ccc',
                type: 'dashed',
              },
            },
          },
        ],
        series: [
          {
            // name: 'Desert',
            type: 'bar',
            showBackground: true,
            // label: labelOption,
            emphasis: {
              focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 200, 130],
          },
          {
            // name: 'Wetland',
            type: 'bar',
            showBackground: true,
            // label: labelOption,
            emphasis: {
              focus: 'series',
            },
            data: [98, 77, 101, 99, 40, 60, 89],
          },
        ],
      }
      myChart.setOption(option)
    </script>
  </body>
</html>
